import 'moment/locale/zh-cn';
import { getDeviceInfoPage, deleteBatch } from '../api';
import { Button, Space, Modal, Layout, Input, message } from 'myselfantd';
import React, { useState, useRef, useMemo, useCallback } from 'react';
import FormContent from './FormContent';
export default () => {
  const ref = useRef<any>();
  const [curState, setCurState] = useState([false, 'view', ''] as [boolean, string, any]);
  return (
    <>
      <Layout.PageTemplate
        pageRef={ref}
        title="终端管理"
        search={useMemo(
          () => ({
            template: [
              {
                name: 'conditions',
                render: () => <Input placeholder="请输入终端编号/终端序列号"  showCount={false}/>,
              },
            ],
            button: [
              <Button.Image
                size="large"
                type="primary"
                onClick={() => {
                  setCurState([true, 'add', '']);
                }}
                icon={'add'}
              >
                新增
              </Button.Image>,
            ],
          }),
          [],
        )}
        table={useMemo(
          () => ({
            template: [
              {
                title: '序号',
                dataIndex: 'index',
                width: 100,
                align: 'left',
                fixed: 'left',
                render: (text: any, record: any, index: any) => {
                  return index + 1;
                },
              },
              {
                title: '终端类型',
                dataIndex: 'type',
                align: 'left',
                width: 150,
                render: (_: any) => {
                  enum TYPE {
                    ncu = 1,
                    智能驾驶舱 = 2,
                  }
                  return TYPE[_];
                },
              },
              {
                title: 'SIM卡号',
                dataIndex: 'simNo',
                width: 100,
                align: 'left',
                ellipsis: true,
                render: (text: any, record: any) => <span>{text ? text : '-'}</span>,
              },
              {
                title: '生产厂家',
                dataIndex: 'producer',
                align: 'left',
                width: 120,
              },
              {
                title: '终端型号',
                width: 120,
                dataIndex: 'model',
                align: 'left',
              },
              {
                title: '终端序列号',
                width: 120,
                dataIndex: 'sn',
                align: 'left',
              },
              {
                title: 'wifi编号',
                dataIndex: 'code',
                align: 'left',
                width: 150,
              },
              {
                title: '注册时间',
                dataIndex: 'createTime',
                align: 'left',
                width: 150,
                ellipsis: true,
              },
              {
                title: '已绑定农机编号',
                width: 150,
                dataIndex: 'bondedDevicesCode',
                align: 'left',
                ellipsis: true,
                render: (text: any, record: any) => (
                  <span>{record.bondedDevicesCode ? record.bondedDevicesCode : '未绑定'}</span>
                ),
              },
              {
                title: '所属系统',
                width: 100,
                textWrap: 'word-break',
                align: 'left',
                dataIndex: 'belongingSystem',
                render: (_: any) => {
                  enum TYPE {
                    设备管理系统 = 0,
                    一控多机 = 1,
                  }
                  return TYPE[_];
                },
              },
              {
                title: '备注',
                dataIndex: 'remark',
                align: 'left',
                width: 200,
                ellipsis: true,
              },
              {
                title: '操作',
                width: 200,
                fixed: 'right',
                align: 'left',
                render: (_: any, record: any) => {
                  return (
                    <Space size="middle">
                      <Button type="link" block onClick={() => setCurState([true, 'edit', _])}>
                        修改
                      </Button>
                      <Button
                        type="link"
                        block
                        onClick={async () => {
                          let { result } = await deleteBatch({ ids: _.id });
                          if (result) {
                            message.success('删除成功');
                            ref.current?.handleSearch();
                          }
                        }}
                      >
                        删除
                      </Button>
                    </Space>
                  );
                },
              },
            ],
            // data: useMemo(
            //   () => ({
            //     data: [] as ColumnsType<DataType>,
            //     page: { total: 0, pageSize: 20, current: 1 },
            //   }),
            //   [],
            // ),
          }),
          [],
        )}
        // request={useCallback(async (page: any, params: any) => {
        //   let defaultParams: any = {
        //     page: page.current,
        //     pageSize: page.pageSize,
        //   };
        //   let {
        //     result: { data, pageIndex, pageSize: newPageSize, total },
        //   } = await getDeviceInfoPage({ ...defaultParams, ...params });
        //   return {
        //     data,
        //     page: { total, pageSize: newPageSize, current: pageIndex },
        //   };
        // }, [])}
      />
      <Modal.Dialog
        title="修改终端信息"
        showDialog={curState[1].includes('edit') && curState[0]}
        changeDialog={(val: boolean) => {
          setCurState([val, 'view', '']);
        }}
        size={'middle'}
      >
        <FormContent
          viewmode="edit"
          onFinish={(val: boolean) => {
            ref.current?.handleSearch();
            setCurState([val, 'edit', '']);
          }}
          data={curState[2]}
        />
      </Modal.Dialog>
      <Modal.Dialog
        title="新增终端信息"
        showDialog={curState[1].includes('add') && curState[0]}
        changeDialog={(val: boolean) => {
          setCurState([val, 'view', '']);
        }}
        size={'middle'}
      >
        <FormContent
          onFinish={(val: boolean) => {
            ref.current?.handleSearch();
            setCurState([val, 'add', '']);
          }}
          viewmode="add"
        />
      </Modal.Dialog>
    </>
  );
};
